<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title></title>

        <style>

            body{
                background-color:#F9F9F9;
            }
        
            .my-style{

                width:300px;
                height:300px;

                background-color:#FFFFFF;

            }

            .my-style:hover{
                box-shadow: 2px 8px 10px 5px #DDDDDD;
            }

            .my-btn{
                display:inline-block;
                width:100px;
                height:30px;
                background-color:red;   
                
                text-align: center;/*内部文字水平居中*/
                line-height: 30px;/*文字在行高范围内垂直居中*/
            }

            .my-btn:link{/*超链未点击之前的样式*/
               color:white; 
               text-decoration:none; /*文本的装饰*/          
            }

            .my-btn:visited{/*超链未点击之后的样式*/
               color:white;   
               text-decoration:none;        
            }

            .my-btn:active{/*超链未点击之时的样式*/

                background-color: rgb(113, 113, 236);
            }
        
        </style>
        
    </head>
    <body>
       
       <div class="my-style"></div>

       <a class="my-btn" href="1.html">加入购物车</a>
       
        
    </body>

</html>